<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>Macro宏利网-登录</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <#--  本地layui.css不显示图标  -->
    <#--  <link rel="stylesheet" href="../static/layui/css/layui.css">  -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.8.18/css/layui.css">
    <link rel="stylesheet" href="../static/res/static/css/index.css">
    <link rel="stylesheet" type="text/css" href="../static/AnjiVerify/css/verify.css">

    <script>
        (function () {
            if (!window.Promise) {
            document.writeln('<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-promise/4.1.1/es6-promise.min.js"><' + '/' + 'script>');
            }
        })();
    </script>
</head>
<body>
<div class="layui-fulid" id="house-login">
    <form action="email-login" method="post">
<#--    <form action="doLogin" method="post">-->
        <div class="layui-form">
            <p>邮箱登录</p>
            <div class="layui-input-block login">
                <i class="layui-icon layui-icon-username"></i> <input type="text"
                                                                      required lay-verify="required"
                                                                      name="email"
                                                                      value="${(emailLoginVo.email)!''}"
                                                                      placeholder="请输入邮箱"
                                                                      class="layui-input"
                                                                      style="border-radius: 0.5rem">
            </div>

            <button type="button" class="btn btn-outline-primary" style="color: #ffffff;border: 2px solid #ffffff;background-color: #008CBA; border-radius: 0.5rem" id="sendEmailBtn">获取验证码</button>
            <#--            滑动验证码弹窗div-->
            <div id="mpanel2" style="margin-top:50px;"></div>
            <div class="layui-input-block login">
                <i class="layui-icon layui-icon-vercode"></i> <input
                        type="text" required lay-verify="required" name="captcha"
                        value="${(emailLoginVo.captcha)!''}" placeholder="请输入验证码"
                        class="layui-input"
                        style="border-radius: 0.5rem">

            </div>

<#--  图片验证码实现  -->
<#--            <div class="layui-input-block getCode">-->
<#--                <input type="text" name="graphicCode" required lay-verify="required"-->
<#--                       placeholder="请输入图片验证码" class="layui-input"><img alt=""-->
<#--                                                                      src="getVerify" onclick="getVerify(this);"-->
<#--                                                                      style="border: 1px solid #e2e2e2;font-size: 18px;height: 48px;margin-top: -93px;width: 44%;background-color: #e8d6c0;margin-left: 166px;">-->
<#--            </div>-->

<#--  短信验证码实现  -->
<#--            <div class="form-group">-->
<#--                <label for="smsCaptcha">验证码</label>-->
<#--                <div class="captcha-container">-->
<#--                    <input type="text" class="form-control" id="smsCaptcha" name="smsCaptcha" required>-->
<#--                    <button type="button" class="btn btn-outline-primary" id="sendSmsBtn">获取验证码</button>-->
<#--                </div>-->
<#--            </div>-->

            <span style="color: red; font-size: 20px; font-weight: bold; font-family: '楷体', '楷体_GB2312';">${error!''}</span>
            <input type="hidden" name="redirect_url" value="${RequestParameters['redirect_url']!''}" />
            <button class="layui-btn" style="margin-top: 5px;color: #ffffff;border: 2px solid #ffffff;background-color: #008CBA; border-radius: 0.5rem; text-align: center;" lay-submit lay-filter="user-login">登&nbsp;&nbsp&nbsp;&nbsp录</button>
        </div>
    </form>
<#--    <div class="layui-form2">-->
<#--       按照configuration.setSharedVariable配置全局变量，未成功-->
<#--        暂时取消注册功能，手机号注册，需要手机号登录，与邮箱登录两套方案分开-->
<#--    可以实现信息补录表单-->
<#--        <button class="layui-btn" style="margin-top: 30px;color: #ffffff;border: 2px solid #ffffff;background-color: #008CBA;" lay-submit onclick="window.open('${ssoIpAddr}/register')">注册</button>-->
<#--    </div>-->
</div>

<#--    验证码版本jquery-->
<script type="text/javascript" src="../static/AnjiVerify/js/jquery.min.js"></script>
<#--  <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/1.9.1/jquery.js" ></script>  -->
<script src="../static/AnjiVerify/js/crypto-js.js"></script>
<script src="../static/AnjiVerify/js/ase.js"></script>
<script src="../static/AnjiVerify/js/verify.js"></script>

<script type="application/javascript">
    let countdown = 60;
    // 初始化验证码  弹出式
    $('#mpanel2').slideVerify({
        baseUrl: "${ssoIpAddr}",  //服务器请求地址, 默认地址为安吉服务器;
        mode:'pop',     //展示模式
        containerId:'sendEmailBtn',//pop模式 必填 被点击之后出现行为验证码的元素id
        imgSize : {       //图片的大小对象,有默认值{ width: '310px',height: '155px'},可省略
            width: '120%',
            height: '200px'
        },
        barSize:{          //下方滑块的大小对象,有默认值{ width: '310px',height: '50px'},可省略
            width: '120%',
            height: '40px'
        },
        beforeCheck:function(){  //检验参数合法性的函数  mode ="pop"有效
            // var flag = true;
            // //实现: 参数合法性的判断逻辑, 返回一个boolean值
            // return flag
            var name = document.getElementsByName('email')[0].value
            if (name == '') {
                alert("邮箱不能为空");
                return false
            }else {
                return true
            }
            
        },
        ready : function() {},  //加载完毕的回调
        success : function(params) { //成功的回调
            // params为返回的二次验证参数 需要在接下来的实现逻辑回传服务器
            // 例如: login($.extend({}, params))  
            sendEmailCaptcha(params); // 调用发送验证码函数
        },
        error : function() {}        //失败的回调
    });

    <#--  // 带检查slideVerify的滑动验证码实现，但是，存在的问题是模态窗口的x关闭失效了，$('#sendEmailBtn').slideVerify()应该在外层调用
    $(document).ready(function () {
        // 确保 verify.js 正确加载并定义了 slideVerify 方法
        if (typeof $.fn.slideVerify === 'function') {
            $('#sendEmailBtn').slideVerify({
                // baseUrl是用用于访问anjicontroller中/captcha/get/check接口
                // baseUrl: 'https://captcha.anji-plus.com/captcha-api',
                // baseUrl:'https://honglitech.cn',
                baseUrl: "${ssoIpAddr}",
                containerId: 'sendEmailBtn',
                mode: 'fixed', // 'pop' 弹出式, 'fixed' 固定式
                imgSize: {
                    width: '120%',
                    height: '200px'
                },
                barSize: {
                    width: '120%',
                    height: '40px'
                },
                beforeCheck: function () {
                    return true;
                },
                ready: function () {
                },
                success: function (params) {
                    sendEmailCaptcha(params); // 调用发送验证码函数
                },
                error: function () {
                }
            });
        } else {
            console.error("slideVerify 插件未正确加载");
        }

        if (!window.Promise) {
            document.writeln('<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-promise/4.1.1/es6-promise.min.js"><' + '/' + 'script>');
        }
    });
    document.getElementById('sendEmailBtn').addEventListener('click', function() {
    });  -->

    function sendEmailCaptcha(params){
        const email = document.getElementsByName('email')[0].value;
        // 图片验证码
        // const graphicCode = document.getElementsByName('graphicCode')[0].value;
        if (!email || !/\w+@\w+(\.\w{2,3})*\.\w{2,3}/.test(email)) {
            alert('请输入正确的邮箱');
            return;
        }

        // 发送邮箱验证码请求
        fetch('/captcha/email/send', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            // body: JSON.stringify({ email: email, CaptchaVO: captchaVO })
            body: JSON.stringify({ email: email })
        })
        .then(response => response.json())
        .then(response => {
            if (200 === response.code) {
                startCountdown();
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('发送验证码失败，请稍后再试');
        });
    };
    // 倒计时
    function startCountdown () {
        const btn = document.getElementById('sendEmailBtn');
        btn.disabled = true;

        let timer = setInterval(() => {
            btn.textContent = countdown+"秒后重新获取";
            countdown--;

            if (countdown < 0) {
                clearInterval(timer);
                btn.disabled = false;
                btn.textContent = '获取邮箱验证码';
                countdown = 60;
            }
        }, 1000);
    };
</script>

</body>